<template>
  <div class="dashboard-container">
    <!-- <component :is="currentRole" /> -->
    <div class="itemwarp">
      <div class="left">
        <h2 class="itemheader">------ 运营概况 ------</h2>
        <h3>
          当前有
          <span class="color">&nbsp {{runing}} &nbsp</span> 个客户正在执行中；有
          <span class="color">&nbsp {{end}} &nbsp</span> 个合同即将到期；
          <span class="color">&nbsp {{back}} &nbsp</span> 个合同等待回款；
          <span class="color">&nbsp {{change}} &nbsp</span>个资源发生变更
        </h3>
        <div class="diagram">
          <div class="diagrammin">
            <div id="myChart1" style="width:100%;height:100%;"></div>
            <!-- <div class="textname">销售任务进度</div> -->
          </div>
          <div class="diagrammax">
            <div id="myChart2" style="width:100%;height:100%;"></div>
            <!-- <div class="textname">资源饱和度</div> -->
          </div>
          <div class="diagrammin">
            <div id="myChart3" style="width:100%;height:100%;"></div>
            <!-- <div class="textname">资源锁失败率</div> -->
          </div>
        </div>
      </div>
      <div class="right">
        <div class="card" style="height:190px;">
          <div class="cardheader">团体销售冠军榜</div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="年度" name="first">
              <div class="cardimgwap">
                <div class="cardone" v-for="(item,index) in team.year" :key="index">
                  <img v-if="index==0" src="../../assets/img/one1.png" class="onimg" />
                  <img v-if="index==1" src="../../assets/img/one2.png" class="onimg" />
                  <img v-if="index==2" src="../../assets/img/one3.png" class="onimg" />

                  <div class="textcard">{{item}}</div>
                </div>
                <!-- <div class="cardone">
              <img src="../../assets/img/one2.png" class="onimg" />
              <div class="textcard">**部门</div>
            </div>
            <div class="cardone">
              <img src="../../assets/img/one3.png" class="onimg" />
              <div class="textcard">**部门</div>
                </div>-->
              </div>
            </el-tab-pane>
            <el-tab-pane label="当月" name="second">
              <div class="cardimgwap">
                <div class="cardone" v-for="(item,index) in team.month" :key="index">
                  <img v-if="index==0" src="../../assets/img/one1.png" class="onimg" />
                  <img v-if="index==1" src="../../assets/img/one2.png" class="onimg" />
                  <img v-if="index==2" src="../../assets/img/one3.png" class="onimg" />

                  <div class="textcard">{{item}}</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="card card2">
          <div class="cardheader">个人销售冠军榜</div>
          <el-tabs v-model="activeName1">
            <el-tab-pane label="年度" name="third">
              <div class="cardimgwap">
                <div class="cardone" v-for="(item,index) in user.year" :key="index">
                  <img v-if="index==0" src="../../assets/img/one1.png" class="onimg" />
                  <img v-if="index==1" src="../../assets/img/one2.png" class="onimg" />
                  <img v-if="index==2" src="../../assets/img/one3.png" class="onimg" />

                   <div class="textcard">{{item.door}}</div>
                  <div class="textcard">{{item.name}}</div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="当月" name="fourth">
              <div class="cardimgwap">
                <div class="cardone" v-for="(item,index) in user.month" :key="index">
                  <img v-if="index==0" src="../../assets/img/one1.png" class="onimg" />
                  <img v-if="index==1" src="../../assets/img/one2.png" class="onimg" />
                  <img v-if="index==2" src="../../assets/img/one3.png" class="onimg" />

                  <div class="textcard">{{item.door}}</div>
                  <div class="textcard">{{item.name}}</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="backlog">
      <h2 class="itemheader">------ 待办事项 ------</h2>
      <div class="hint">
        共
        <span class="color">&nbsp {{to_doList.length}} &nbsp</span>件待办事件
        <el-button class="more" type="text" @click.native="seemore">查看更多</el-button>
      </div>
      <div class="list">
        <el-table
          :cell-style="cellstyle"
          :data="to_doList"
          :header-cell-style="$headerstyle"
          border
          style="width: 100%"
        >
          <el-table-column prop="get_class.name" label="申请类型" align="center"></el-table-column>
          <el-table-column align="center" label="主题" class-name="nameclass">
            <template slot-scope="scope">
              <el-button type="text" @click.native="seemore">{{scope.row.them}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" align="center" label="发起时间"></el-table-column>
          <el-table-column prop="get_admin.name" align="center" label="发起人"></el-table-column>
          <el-table-column prop="get_check.name" align="center" label="前置审批人"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="backlog bto">
      <h2 class="itemheader">------ 预警/消息 ------</h2>
      <div class="hint">
        共
        <span class="color">&nbsp {{warningList.length}} &nbsp</span>条未读
        <el-button class="more" type="text" @click.native="seemorewaring">查看更多</el-button>
      </div>
      <div class="list">
        <el-table
          :data="warningList"
          border
          :cell-style="$rowstyle"
          :header-cell-style="$headerstyle"
          style="width: 100%"
        >
          <el-table-column prop="date" label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status==3">已读</span>
              <span v-if="scope.row.status==2" style="  color: red;">未读</span>
            </template>
          </el-table-column>
          <el-table-column prop="them" label="主题" align="center" class-name="nameclass"></el-table-column>
          <el-table-column prop="created_at" label="时间" align="center"></el-table-column>
          <el-table-column prop="name" label="查看" align="center" width="100"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import adminDashboard from "./admin";
import editorDashboard from "./editor";
import echarts from "echarts";
import {
  operation_overview,
  warning_message,
  to_do,
  sales_champion
} from "../../api/home_page.js";
import { SETDATE } from "../../api/System";
export default {
  name: "Dashboard",
  components: { adminDashboard, editorDashboard },
  data() {
    return {
      runing: "0",
      end: "0",
      back: "0",
      change: "0",
      team: {},
      user: {},
      //预警消息
      warningList: [],
      //待办事项
      to_doList: [],
      currentRole: "adminDashboard",
      activeName: "first",
      activeName1: "third"
    };
  },
  computed: {
    ...mapGetters(["roles"])
  },
  created() {
    this.getoperation_overview();
    this.getwarning_messageLIST();
    this.getto_do();
    this.getsales_champion();
    if (!this.roles.includes("admin")) {
      this.currentRole = "editorDashboard";
    }
  },
  mounted() {
    // this.drawLine1();
    // this.drawLine2();
    // this.drawLine3();
  },
  methods: {
    //冠军
    getsales_champion() {
      sales_champion().then(res => {
        if (res.code == 200) {
          this.team = res.data.team;
          this.user = res.data.user;
        }
      });
    },
    //待办事项
    seemore() {
      this.$router.push({ path: "/examine/index" });
    },
    //预警
    seemorewaring() {
      this.$router.push({ path: "/message/index" });
    },
    //待办事项
    getto_do() {
      to_do().then(res => {
        if (res.code == 200) {
          this.to_doList = res.data;
          this.to_doList.forEach(element => {
            element.created_at = SETDATE(element.created_at);
          });
        }
      });
    },
    //获取预警消息
    getwarning_messageLIST() {
      warning_message().then(res => {
        if (res.code == 200) {
          this.warningList = res.data;
          this.warningList.forEach(element => {
            element.created_at = SETDATE(element.created_at);
          });
        }
      });
    },
    //获取运营概况数据
    getoperation_overview() {
      operation_overview().then(res => {
        if (res.code == 200) {
          this.runing = res.data.contact.runing;
          this.end = res.data.contact.end;
          this.back = res.data.contact.back;
          this.change = res.data.contact.change;
          var obj1 = {
            title: {
              text: "资源锁定失败率",
              top: "bottom",
              left: "center"
            },
            tooltip: {
              formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
              feature: {}
            },
            series: {
              name: "资源锁定失败率",
              type: "gauge",
              detail: { formatter: "{value}", fontSize: 14, show: false },
              data: [],
              axisLine: {
                show: false
              }
            }
          };

          obj1.series.data = [
            {
              value:
                (
                  res.data.image.lock_fail.sale / res.data.image.lock_fail.total
                ).toFixed(2) * 100
            }
          ];
          this.drawLine3(obj1);

          var obj2 = {
            title: {
              text: "资源饱和度",
              top: "bottom",
              left: "center",
              textStyle: {
                fontSize: 24
              }
            },
            tooltip: {
              formatter: "{a} <br/>{b} : {c}%"
            },

            toolbox: {
              feature: {}
            },
            series: {
              name: "资源饱和度",
              type: "gauge",
              detail: { formatter: "{value}" },
              data: []
            }
          };
          obj2.series.data = [
            {
              value:
                (
                  res.data.image.resource.sale / res.data.image.resource.total
                ).toFixed(2) * 100
            }
          ];
          this.drawLine2(obj2);
          var obj3 = {
            title: {
              text: "销售任务进度",
              top: "bottom",
              left: "center"
            },
            tooltip: {
              formatter: "{a} <br/>{b} : {c}%"
            },

            toolbox: {
              feature: {}
            },
            series: {
              name: "销售任务进度",
              type: "gauge",
              detail: { formatter: "{value}", show: false },
              data: []
            }
          };

          obj3.series.data = [
            {
              value:
                (
                  res.data.image.sales.sale / res.data.image.sales.total
                ).toFixed(2) * 100
            }
          ];
          this.drawLine1(obj3);
        }
      });
    },
    cellstyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        // 指定列号
        return "color:#0000FF;text-decoration: underline;";
      }
    },
    drawLine1(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      myChart.setOption(data);
    },
    drawLine3(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart3"));
      // 绘制图表
      myChart.setOption(data);
    },
    drawLine2(data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart.setOption(data);
    }
  }
};
</script>
<style lang="scss" scoped>
.itemwarp {
  height: 440px;
  width: 100%;

  // background: red;
}
.itemheader {
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #999999;
}
h3 {
  text-align: center;
  padding: 0;
}
.itemwarp {
  display: flex;
  width: 100%;
}
.right {
  width: 250px;
  height: 100%;
  // background: blue;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
}
.left {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.diagrammin {
  // width: 250px;
  width: 30%;
  height: 230px;
}
.diagrammax {
  width: 300px;
  height: 300px;
}
.diagram {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}
.card {
  width: 200px;
  height: 150px;
  // background: brown;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.349019607843137);
}

.card2 .textcard {
  line-height: 25px;
  font-size: 14px;
}
.cardheader {
  width: 100%;
  height: 25px;
  line-height: 25px;
  text-align: center;
  background: rgba(0, 86, 156, 1);
  font-size: 16px;
  color: #fff;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.cardtab {
  width: 100%;
  height: 25px;
  display: flex;
  background: #fff;
  align-items: center;
}
.tabitem {
  // color: #fff;
  margin: 0 5px;
  font-size: 18px;
}
.is {
  color: red;
  text-decoration: underline;
}
.cardimgwap {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.cardone {
  width: 30%;
  height: 100px;
  // background: red;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.onimg {
  width: 100%;
  height: 60px;
  margin-bottom: 5px;
  // margin-top: 5px;
}
.textcard {
  width: 100%;
  font-size: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.textname {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.backlog {
  margin-top: 20px;
}
.hint {
  width: 97%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  margin-bottom: 10px;
}
.list {
  margin: 0 auto;
  width: 97%;
}
.more {
  color: #0000ff;
  text-decoration: underline;
  position: absolute;
  right: 0;
  top: 0;
}
.bto {
  margin-bottom: 100px;
}
.color {
  color: red;
  text-decoration: underline;
}
.card2 {
  height: 220px;
  margin-top: 20px;
  .cardone {
    height: 130px;
  }
  .onimg {
    height: 60px;
  }
}
</style>